<template>
  <div class="loginBox">
    <div class="leftBg">
      <div class="welcome">欢迎来到与生·数据可视化平台</div>
      <div class="label">青春有我在 健康筑未来</div>
    </div>
    <div class="rightLog">
      <div class="logTitle">
        <img src="@/assets/image/logo.png" />
        <span class="leftName">与生·</span>
        <span class="rightName">数据可视化平台</span>
      </div>
      <div class="box3">
        <div>
          <input
            type="text"
            placeholder="请输入账号"
            onfocus="placeholder=''"
            onblur="placeholder='请输入账号'"
            id="id"
            v-model="data.phone"
          /><!--onfocus聚焦，onblur失去焦点-->
          <div id="warning1" style="--i:45;"></div>
          <!--行内元素不能设置宽、高-->
        </div>
        <div>
          <input
            type="password"
            placeholder="请输入密码"
            onfocus="placeholder=''"
            onblur="placeholder='请输入密码'"
            id="password"
            v-model="data.password"
          />
          <div id="warning2" style="--i:85;"></div>
        </div>
        <div class="distinguish">
          <input
            type="text"
            id="code_input"
            placeholder=" 请输入验证码"
            v-model="value"
          />
          <!--删除value属性，否则报 Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.-->
          <div id="v_container"></div>
        </div>
        <div id="warning3"  style="--i:125;"></div>
<!--        <div class="found">忘记密码</div>-->
        <button @click="login">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import { GVerify } from '@/assets/utils/gverify.js'
//import { createApp } from 'vue'
export default {
  data() {
    return {
      value: '',
      verifyCode: '1',
      data: {
        username: '',
        phone: '',
        password: ''
      },
      path: '/loginPage'
    }
  },
  mounted() {
    this.verifyCode = new GVerify('v_container')
  },
  methods: {
    login() {
      //直接接口名，main.js中声明了baseURL
      if (
        this.data.phone == null ||
        this.data.phone.trim() == "" ||
        this.data.password == null ||
        this.data.password.trim() == ""
      ) {
        if (this.data.phone == null || this.data.phone.trim() == "")
          document.getElementById('warning1').innerHTML = '账户不能为空'
        if (this.data.password == null || this.data.password.trim() == "")
          document.getElementById('warning2').innerHTML = '密码不能为空'
        this.verifyCode.refresh()
        return
      }
      console.log('传参')
      console.log(this.verifyCode)
      const data = this.data
      if (this.verifyCode.validate(this.value)) {
        // 后端匹配
        // this.$http
        //   .post('infoservice/userinfo/loginByPhone', data)
        //   .then((response) => {
        //     console.log(response)
        //     this.path = '/indexPage'
        //     this.$router.push(this.path)
        //   })
        //   .catch((response) => {
        //     this.data.id = null
        //     this.data.password = null
        //     this.verifyCode.refresh()
        //     console.log(response.toString())
        //     alert('登陆失败，可能原因是员工号或密码输入有误！')
        //   })

        localStorage.setItem("user",new Date().getTime())
        this.$router.push('/indexPage')

      } else {
        document.getElementById('warning3').innerHTML = '验证码错误'
        this.verifyCode.refresh()
        return
      }
    }
  }
}
</script>

<style lang="less" scoped>
.loginBox {
  display: flex;
  width: 60%;
  height: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid #f5d858;
  .leftBg {
    position: relative;
    display: flex;
    flex: 5;
    width: 60%;
    height: 100%;
    background: url(@/assets/image/bgPic.png) no-repeat center center;
    background-position: 2% 0;
    background-size: 150%;
    background-color: #b41e1d;
    .welcome {
      position: absolute;
      top: 55px;
      left: 50px;
      font-weight: 550;
      font-size: 24px;
      color: #fff;
    }
    .label {
      position: absolute;
      margin-top: 8px;
      top: 80px;
      left: 50px;
      font-size: 20px;
      color: #faa800;
    }
  }
  .rightLog {
    flex: 3;
    width: 40%;
    height: 100%;
    .logTitle {
      text-align: center;
      height: 16%;
      img {
        margin-bottom: -5px;
        width: 30px;
        height: 30px;
      }
      .leftName {
        font-size: 0.4375rem;
        padding-right: 8px;
        color: #fbb40a;
        font-weight: 600;
      }
      .rightName {
        font-size: 0.5625rem;
        font-weight: 600;
      }
    }
    .box3 {
      width: 100%;
      height: 84%;
      display: flex;
      background-color: #d37401;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      position: relative;
    }
    #id,
    #password {
      width: 4.5rem;
      height: 27px;
      text-indent: 10%; // 文本框输入文字与左边的距离
      background-position: 0;
      background-repeat: no-repeat; //去除背景重复
      background-size: 0.4375rem 0.4375rem; // 图片尺寸
      border-radius: 0.125rem; // 圆角
      border: 1.5px solid #ccc;
      outline: none; /*outline外边框，input:focus聚焦*/
    }
    #id {
      background-image: url('@/assets/image/用户.png');
    }
    #password {
      background-image: url('@/assets/image/密码.png');
    }
    #id:focus {
      //background-size: 0 0;
      border-style: solid;
      border-color: rgb(156, 220, 254);
    }
    #password:focus {
      //background-image: none;
      border-style: solid;
      border-color: rgb(156, 220, 254);
    }
    ::-webkit-input-placeholder {
      font-family: 'Courier New', Courier, monospace;
      //padding-left: 0.5rem;
      color: #999 !important;
      font-size: 10px;
    }
    .distinguish {
      width: 4.5rem;
      height: 0.4375rem;
    }
    #code_input {
      margin-top: 5px;
      width: 45%;
      height: 27px;
      float: left;
      border-radius: 0.125rem; // 圆角
      border: 1.5px solid #ccc;
      outline: none; /*outline外边框，input:focus聚焦*/
    }
    #v_container {
      margin-top: 5px;
      width: 54%;
      height: 150%;
      //background-color: #ccc;
      float: right;
    }
    .found {
      float: right;
      font-size: 0.67em;
      margin-top: 10px;
      padding-right: 40px;
      font-family: monospace;
      color: rgb(0, 122, 204);
      text-decoration: underline; // 下划线
    }
    button {
      margin-top: 10px;
      margin-left: 50px;
      // transform: translate(-50%, -50%);子绝父相，居中。现今父元素是绝对定位
      width: 5rem;
      height: 30px;
      font-size: 20px;
      font-family: '华文行楷';
      background-color: #ffbe00;
      border: 0;
    }
    #warning1,
    #warning2,
    #warning3 {
      width: 1.55rem;
      font: normal 400 8px '微软雅黑 Light';
      color: crimson;
      margin-left: 0.125rem;
      position: absolute;
      top: var(--i)+"px";
    }
  }
}
</style>
